<template>
  <div class="teachers_page">
    <div style="display:flex;align-items: center;justify-content: space-between;margin:0 0 10px;">
      <div style="display:flex;align-items: center;">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="用户名称">
            <el-input clearable size="small" v-model="formInline.nickname" placeholder="用户名称"></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input clearable size="small" v-model="formInline.mobile" placeholder="手机号"></el-input>
          </el-form-item>
        </el-form>
        <el-button size="small" type="primary" @click="onSubmit">搜索</el-button>
        <el-button size="small" @click="reset">重置</el-button>
        <!-- <el-button size="small" type="danger" @click="exportData">批量导出</el-button> -->
      </div>
      <div>
      <!-- <el-button size="small" type="primary" @click="addUser">创建用户</el-button> -->
    </div>
  </div>
  <el-table ref="multipleTable" v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row empty-text="暂无数据">
    <el-table-column label="ID" width="100">
      <!-- <template slot="header" slot-scope="scope">
        <el-checkbox v-model="idChecked">ID</el-checkbox>
      </template> -->
      <template slot-scope="scope">
        {{ scope.row.id }}
      </template>
    </el-table-column>
    <el-table-column label="用户昵称" width="200" show-overflow-tooltip>
      <!-- <template slot="header" slot-scope="scope">
        <el-checkbox v-model="nickNameChecked">用户昵称</el-checkbox>
      </template> -->
      <template slot-scope="scope">
        {{ scope.row.nickname }}
      </template>
    </el-table-column>
    <!-- <el-table-column label="真实姓名" width="150">
      <template slot-scope="scope">
        {{ scope.row.realName }}
      </template>
    </el-table-column>
    <el-table-column label="姓名拼音" width="150">
      <template slot-scope="scope">
        {{ scope.row.pinyinName }}
      </template>
    </el-table-column> -->
    <el-table-column label="头像" width="100">
      <template slot-scope="scope">
        <img style="width:40px;height:40px;" :src="scope.row.avatar?scope.row.avatar:'/images/avatar.png'" alt="">
      </template>
    </el-table-column>
    <el-table-column label="手机号" width="120">
      <template slot-scope="scope">
        {{ scope.row.mobile }}
      </template>
    </el-table-column>
    <!-- <el-table-column label="性别" width="100">
      <template slot-scope="scope">
        {{ scope.row.gender==1?'男':'女' }}
      </template>
    </el-table-column>
    <el-table-column label="生日" width="100">
      <template slot-scope="scope">
        {{ scope.row.birthday }}
      </template>
    </el-table-column>
    <el-table-column label="公司" width="200">
      <template slot-scope="scope">
        {{ scope.row.company }}
      </template>
    </el-table-column>
    <el-table-column label="职称" width="200">
      <template slot-scope="scope">
        {{ scope.row.jobTitle }}
      </template>
    </el-table-column>
    <el-table-column label="邮箱" width="200">
      <template slot-scope="scope">
        {{ scope.row.email }}
      </template>
    </el-table-column> -->
    <el-table-column label="地址" show-overflow-tooltip width="300">
      <template slot-scope="scope">
        {{scope.row.address}}
        <!-- {{ scope.row.addressDetail.province }}{{ scope.row.addressDetail.city }}{{ scope.row.addressDetail.district }}{{ scope.row.addressDetail.detail }} -->
      </template>
    </el-table-column>
    <!-- <el-table-column label="会员等级" width="200">
      <template slot-scope="scope">
        {{ scope.row.level==0?'非会员':`${scope.row.level}级` }}
      </template>
    </el-table-column> -->
    <!-- <el-table-column label="小鹅通用户积分" width="200">
      <template slot-scope="scope">
        {{ scope.row.xiaoeUserCredit }}
      </template>
    </el-table-column> -->
    <!-- <el-table-column label="用户积分" width="200">
      <template slot-scope="scope">
        <div style="display:flex;align-items:center;">
          <div style="color:#66b1ff;">
            {{ scope.row.score }}
          </div>
          <div>
            <i @click="openAddScore(scope.row)" class="el-icon-edit" style="color:#66b1ff;margin-left:20px;cursor:pointer;"></i>
          </div>
        </div>
      </template>
    </el-table-column> -->
    <el-table-column label="创建时间" width="200">
      <template slot-scope="scope">
        {{ scope.row.createTime }}
      </template>
    </el-table-column>
    <el-table-column label="状态" width="100">
      <template slot-scope="scope">
        <el-tag size="small" v-if="scope.row.state == 1" type="success">启用</el-tag>
        <el-tag size="small" v-else type="danger">停用</el-tag>
      </template>
    </el-table-column>
    <el-table-column fixed="right" label="操作" width="150">
      <template slot-scope="scope">
        <el-button @click="changeState(scope.row, 0)" type="text" style="color:#ff0000;" v-if="scope.row.state == 1">禁用</el-button>
        <el-button @click="changeState(scope.row, 1)" type="text" v-else>启用</el-button>
        <!-- <el-divider direction="vertical"></el-divider>
        <el-button @click="edit(scope.row)" type="text">编辑</el-button>
        <el-divider direction="vertical"></el-divider>
        <el-popconfirm
          @onConfirm="del(scope.row)"
          confirm-button-text='确定'
          cancel-button-text='取消'
          icon="el-icon-info"
          icon-color="red"
          title="是否删除本条数据？">
          <el-button  slot="reference" type="text" style="color:#ff0000;">删除</el-button>
        </el-popconfirm> -->
      </template>
    </el-table-column>
  </el-table>
  <div style="margin:10px 0 0 0;text-align:right;">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageObj.pageNum"
      :page-sizes="[10, 30, 50, 100]"
      :page-size="pageObj.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageObj.total">
    </el-pagination>
  </div>

  <el-dialog title="修改积分" :visible.sync="addSoreModal">
    <el-form>
      <el-form-item label="积分" :label-width="formLabelWidth">
        <el-input size="small" v-model="userScore" autocomplete="off" placeholder="请输入积分"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancelModal">取 消</el-button>
      <el-button type="primary" @click="saveModal">确 定</el-button>
    </div>
  </el-dialog>

  <el-dialog title="创建用户" :visible.sync="addUserModal">
    <el-form>
      <el-form-item label="手机号" :label-width="formLabelWidth">
        <el-input size="small" maxlength="11" v-model="userObj.mobile" autocomplete="off" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item label="昵称" :label-width="formLabelWidth">
        <el-input size="small" v-model="userObj.nickname" autocomplete="off" placeholder="请输入昵称"></el-input>
      </el-form-item>
      <el-form-item label="真实姓名" :label-width="formLabelWidth">
        <el-input size="small" v-model="userObj.realName" autocomplete="off" placeholder="请输入真实姓名"></el-input>
      </el-form-item>
      <el-form-item label="姓名拼音" :label-width="formLabelWidth">
        <el-input size="small" v-model="userObj.pinyinName" autocomplete="off" placeholder="请输入真实姓名"></el-input>
      </el-form-item>
      <el-form-item label="性别" :label-width="formLabelWidth">
        <el-radio-group v-model="userObj.gender">
          <el-radio :label="1">男</el-radio>
          <el-radio :label="2">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="生日" :label-width="formLabelWidth">
        <el-date-picker
          v-model="userObj.birthday"
          style="width:100%;"
          size="small"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="单位" :label-width="formLabelWidth">
        <el-input size="small" v-model="userObj.company" autocomplete="off" placeholder="请输入单位"></el-input>
      </el-form-item>
      <el-form-item label="职称" :label-width="formLabelWidth">
        <el-input size="small" v-model="userObj.jobTitle" autocomplete="off" placeholder="请输入职称"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" :label-width="formLabelWidth">
        <el-input size="small" v-model="userObj.email" autocomplete="off" placeholder="请输入邮箱"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="addUserModal = false">取 消</el-button>
      <el-button type="primary" @click="saveUser">确 定</el-button>
    </div>
  </el-dialog>

</div>
</template>

<script>
import {
  getUserListApi,
  changeStateApi,
  setScoreApi,
  createUserApi,
  deleteUserApi,
  exportCreateApi
} from '@/api/user'

export default {
  data() {
    return {
      list: [],
      listLoading: false,
      currentPage: 1,
      formInline: {
        nickname: '',
        mobile: ''
      },
      pageObj: {
        pageSize: 10,
        pageNum: 1,
        total: 0,
      },
      addSoreModal: false,
      personObj: {},
      formLabelWidth: '80px',
      userScore: 0,
      addUserModal: false,
      userObj: {
        mobile: '',
        nickname: '',
        gender: 1,
        realName: '',
        jobTitle: '',
        birthday: '',
        company: '',
        email: '',
        pinyinName: ''
      },
      idChecked: false,
      nickNameChecked: false
    }
  },
  created() {
    if(this.$route.query.nickName) {
      this.formInline.nickname = this.$route.query.nickName
    }
    this.fetchData()
  },
  methods: {
    exportData() {
      exportCreateApi({
        param: ['id', 'nickname'],
        paramNameMap: {
          id: 'ID',
          nickname: '昵称',
          realName: '真实姓名',
          pinyinName: '拼音姓名',
          mobile: '手机号',
          gender: '性别',
          birthday: '生日',
          company: '公司',
          jobTitle: '职称',
          email: '邮箱',
          address: '地址',
          xiaoeUserCredit: '小鹅通用户积分',
          offlineScore: '线下考试成绩',
          onlineScore: '线上考试成绩'
        },
        beanName: 'user'
      }).then((res) => {
        console.log(res)
      })
    },
    addUser() {
      this.userObj.mobile = ''
      this.userObj.nickname = ''
      this.userObj.gender = 1
      this.userObj.realName = ''
      this.userObj.jobTitle = ''
      this.userObj.birthday = ''
      this.userObj.company = ''
      this.userObj.email = ''
      this.addUserModal = true
    },
    saveUser() {
      createUserApi({
        mobile: this.userObj.mobile,
        nickname: this.userObj.nickname,
        gender: this.userObj.gender,
        realName: this.userObj.realName,
        jobTitle: this.userObj.jobTitle,
        birthday: this.userObj.birthday,
        company: this.userObj.company,
        email: this.userObj.email,
      }).then((res) => {
        this.$message({
          message: '添加成功!',
          type: 'success'
        })
        this.addUserModal = false
        this.pageObj.pageNum = 1
        this.fetchData()
      })
    },
    cancelModal() {
      this.userScore = 0
      this.addSoreModal = false
    },
    saveModal() {
      setScoreApi({
        userId: this.personObj.id,
        score: this.userScore
      }).then((res) => {
        this.cancelModal()
        this.fetchData()
      })
    },
    openAddScore(row) {
      this.addSoreModal = true
      this.personObj = row
      this.userScore = row.score
    },
    onSubmit() {
      this.fetchData()
    },
    reset() {
      this.formInline.nickname = ''
      this.formInline.mobile = ''
      this.pageObj.pageSize = 10
      this.pageObj.pageNum = 1
      this.fetchData()
    },
    changeState(row, state) {
      changeStateApi({
        id: row.id,
        state: state
      }).then((res) => {
        this.fetchData()
      })
    },
    del(row) {
      deleteUserApi({
        ids: row.id
      }).then((res) => {
        this.fetchData()
      })
    },
    edit(row) {
      console.log(row)
      this.$router.push({
        path: '/users/edit',
        query: {
          editId: row.id
        }
      })
    },
    add(row) {
      console.log(row)
      this.$router.push({
        path: '/teachers/add'
      })
    },
    fetchData() {
      this.listLoading = true
      getUserListApi({
        pageNum: this.pageObj.pageNum,
        pageSize: this.pageObj.pageSize,
        nickname: this.formInline.nickname,
        mobile: this.formInline.mobile
      }).then(response => {
        this.list = response.data.result
        this.listLoading = false
        this.pageObj.total = response.data.total
      })
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageObj.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.pageObj.pageNum = val
      this.fetchData()
    }
  }
}
</script>

<style lang="scss" scoped>
   .teachers_page{
     padding: 20px;
     .el-form-item{
       margin-bottom: 0;
     }
   }
</style>
